<template>
  <view class="content">
    <block>
      <!-- 头部 -->
      <view class="navbar">
        <view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: currIndex === item.id }" @click="changeTab(item.id)">
          {{ item.name }}
        </view>
      </view>
      <!-- 显示区域 -->
      <!-- <scroll-view scroll-y="true" class="scroll-Y"  @scrolltolower="lower" @scroll="scroll" :style="{'height': height + 'px'}"> -->
      <scroll-view scroll-y="true" class="scroll-Y">
        <view class="list" v-for="(item, index) in orderList" :key="index">
          <view class="list_title">
            <view class="title_left">
              <image :src="$store.state.imgBaseUrl + '/goodDetail/fireIcon.png'" class="title_type"></image>
              <text class="title_a">采购</text>
              <text class="title_b">{{item.createTime}}</text>
            </view>
            <text class="title_right">{{item.statusName}}</text>
          </view>
          <view class="list_content" @click="gotoOrderDetail(item,index)">
            <view class="list_left" v-if="item.detailVos.length == 1">
              <image :src="item.detailVos[0].mainImage" class="content_a"></image>
              <view class="content_b">
                <text class="b_cont">{{item.detailVos[0].productName}}</text>
              </view>
            </view>
            <!-- <scroll-view  v-else class="scroll-view_H" scroll-x="true"  show-scrollbar="false" scroll-with-animation="true" @scroll="scroll" > -->
            <scroll-view  v-else class="scroll-view_H" scroll-x="true"  show-scrollbar="false" scroll-with-animation="true">
              <view v-for="(i,dindex) in item.detailVos" :key="dindex"  class="scroll-view-item_H uni-bg-red">
                <image :src="i.mainImage"></image>
              </view>
            </scroll-view>
            <view class="content_c">
              <view class="c_pe">
                <text>¥ </text>
                <text class="c_price">{{item.userAmount}}</text>
              </view>
              <text class="c_num">共{{item.quantity}}件</text>
            </view>
          </view>
          <view class="list_buy">
            <text class="tobuy" v-if="item.status == 0" @click="gotoOrderDetail(item)">立即支付</text>
            <text class="tobuy" v-if="item.status == 3" @click="gotoOrderDetail(item)">确定收货</text>
            <text class="tobuy other" v-if="item.status == 3" @click="logistics(item)">查看物流</text>
            <text class="tobuy other" v-if="item.status == 0" @click="cancelOrder(item)">取消订单</text>
            <text class="tobuy other" v-if="item.status == 6 || item.status == 5" @click="delectCurOrder(item, index)">删除订单</text>
          </view>
        </view>
      </scroll-view>      
    </block>
    <block v-if="orderList.length == 0">
      <view class="goot-empty-ml">
        <image :src="$store.state.imgBaseUrl + '/goodDetail/empty-order.png'"></image>
        <view class="text1">您暂无订单哦~</view>
        <view class="text2">先去逛逛吧~</view>
      </view>
      <view class="good-footer-ml">
        <button type="primary" class="sub-btn cur" plain="true" @click="gotoShopping">继续采购</button>
      </view>
    </block>
    <common-pop :baseInfo="commonPopInfo" @cancelPop="cancelComPop" @doSure="delectCartGoods"></common-pop>
  </view>
</template>

<script>
import { orderList, cancelOrder, deleteOrder } from '@/service/purchaseShop/order.service.js'
import commonPop from '@/components/common-pop/index.vue'
var _self;
export default {
  components: {commonPop},
  data() {
    return {
      height: '',
      scrollTop: 0,
      old: {
        scrollTop: 0
      },
      navList: [
        {name: '全部', id: '-1'},
        {name: '待付款', id: '0'},
        {name: '待发货', id: '1'},
        {name: '待收货', id: '3'},
        {name: '已完成', id: '5'}
      ],
      currIndex: '-1',
      pages: {
        size: 10,
        current: 1,
        total: 0,
        noList: true
      },
      orderList: [],
      count: '',
      isLog: false,
      logisticsdetail: '', // 物流信息
      commonPopInfo: {
        title: '确认取消该订单吗？',
        cancel: '取消',
        sure: '确定',
        show: false
      },
      delectOrederId: '',
      getPreIndex: ''
    };
  },
  onLoad(options) {
    _self = this;
    this.currIndex = options.type || '-1';
  },
  mounted() {
    uni.getSystemInfo({
      success: (res) => {
        this.height = res.windowHeight - uni.upx2px(100)
      }
    })
    this.findAllOrder()
  },
  onShow() {
    if (this.getPreIndex) { // 获取订单详情中删除的订单的index
      this.orderList.splice(this.getPreIndex, 1);
      this.getPreIndex = '';
    }
  },
  onReachBottom: () => {
    // 页面滚动到底部的事件
    if (_self.pages.current == 1) {
      return false;
    } else if (_self.pages.total > _self.orderList.length) {
      _self.findAllOrder();
    } else if (_self.pages.current != 1) {
      uni.showToast({
        title: '已经到底了',
        icon: 'none'
      })
    }
  },
  methods: {
    delectCurOrder (item, index) {
      let _self = this;
      uni.showModal({
        title: '',
        content: '确认删除订单吗?',
        confirmColor: '#F6DA99',
        cancelColor: '#434343',
        success: (res) => {
          if (res.confirm) {
            uni.showLoading();
            deleteOrder({
              id : item.id,
            }, (res) => {
              if (res.status == 0) {
                uni.showToast({
                  title:"删除成功！",
                  mask: true,
                  success: () => {
                    setTimeout(function () {
                      _self.isEdit = false;
                      _self.orderList.splice(index, 1)
                    }, 2000)
                  }
                })
              } else {
                uni.showToast({
                  title: res.msg,
                  icon: 'none'
                });
              }
              uni.hideLoading();
            }, null, {showErrorMsg: true})
          } else {
            _self.isEdit = true;
          }
        }
      })
    },
    cancelComPop () {
      this.commonPopInfo.show = false;
    },
    delectCartGoods () {
      cancelOrder({id: this.delectOrederId}, (res) => {
        if (res.status == 0) {
          uni.showToast({
            title: '取消订单成功',
            icon: 'none'
          });
          this.pages.current = 1;
          this.orderList = [];
          this.findAllOrder();
          this.commonPopInfo.show = false;
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          }); 
        }
      })
    },
    gotoShopping () {
      uni.navigateTo({
        url:'/pages/purchaseShop/index'
      })
    },
    cancelOrder (item) {
      if (item.detailVos.length > 1) { 
        uni.navigateTo({
          url: '/pages/purchaseShop/orderDetail?id=' + item.id + '&payType=' + item.payType
        })
      } else {
        this.delectOrederId = item.id;
        this.commonPopInfo.show = true;
      }
    },
    logistics (item) {
      if (item.detailVos.length > 1) {
        uni.navigateTo({
          url: '/pages/purchaseShop/logisticsList?id=' + item.id
        })
      } else {
        uni.navigateTo({
          url: '/pages/purchaseShop/logisticsDetail?id=' + item.detailVos[0].id
        })
      }
    },
    gotoOrderDetail (item, index) {
      uni.navigateTo({
        url: '/pages/purchaseShop/orderDetail?id=' + item.id + '&payType=' + item.payType + '&index=' + index
      })
    },
    changeTab(id) {
      this.currIndex = id;
      this.pages.current = 1;
      this.orderList = [];
      // this.findAllOrder();
      uni.redirectTo({
        url: '/pages/purchaseShop/orderList?type=' + id
      })
    },
    findAllOrder () {
      uni.showLoading({
        mask: true
      })
      let params = {
        size: this.pages.size,
        current: this.pages.current,
        status: this.currIndex == -1 ? '' : this.currIndex
      }
      orderList(params, (res) => {
        if(res.status == 0) {
          if (this.pages.current == 1) {
            this.orderList = res.data.records;
          } else {
            this.orderList.push(...res.data.records);
          }
          this.pages.total = res.data.total;
          if (this.pages.total > this.orderList.length) {
            this.pages.current++
          }
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
        uni.hideLoading()
      })
    },
    scroll: function(e) {
      this.old.scrollTop = e.detail.scrollTop
    },
  }
};
</script>

<style scoped lang="scss">
.loading {
  text-align: center;
  padding: 30rpx 0;
  font-size: 28rpx;
  color: #666666;
}
.content {
	height: 100%;
  // padding-top: 50rpx;
}
.scroll-Y{
  padding-top: 100rpx;
}
.navbar {
	display: flex;
	height:100rpx;
	background:rgba(255,255,255,1);
	padding: 0 5px;
	background: #fff;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
	position: fixed;
  left: 0;
  right: 0;
  top: 0;
	z-index: 10;
	.nav-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		font-size:28rpx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:500;
		color:rgba(51,51,51,1);
		line-height:100rpx;
		position: relative;
		&.current {
      color: #CD4339;
			&:after {
				content: '';
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				width: 56rpx;
				height: 0;
				border-bottom: 4rpx solid rgba(205,67,57,1);
			}
		}
	}
}
.list {
  background:rgba(255,255,255,1);
  border-radius:8px;
  margin-top: 24rpx;
  overflow: hidden;
  .list_title {
    padding: 32rpx 30rpx;
    .title_left{
      float: left;
      display: flex;
      align-items: center;
      .title_type{
        width: 36rpx;
        height: 30rpx;
      }
      .title_a{
        display: inline-block;
        height:40rpx;
        font-size:28rpx;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(51,51,51,1);
        line-height:40rpx;
        margin-left: 10rpx;
      }
      .title_b{
        display: inline-block;
        margin-left: 28rpx;
        height:40rpx;
        font-size:28rpx;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(153,153,153,1);
        line-height:40rpx;
      }
    }
    .title_right{
      float: right;
      height:40rpx;
      font-size:28rpx;
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      color:rgba(205,67,57,1);
      line-height:40rpx;
    }
  }
  .list_content{
    margin-top: 40rpx;
    padding: 0 30rpx;
   
    position: relative;
    .list_left{
      display: flex;
      align-items: center;
      .content_a{
        width:140rpx;
        height:140rpx;
      }
      .content_b{
        display: inline-block;
        margin-left: 28rpx;
        .b_cont{
          float: left;
          width:378rpx;
          height:72rpx;
          font-size:26rpx;
          font-family:PingFangSC-Regular,PingFang SC;
          font-weight:400;
          color:rgba(51,51,51,1);
          line-height:36rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          word-wrap: break-word;
          white-space: normal !important;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
    }
    .content_c{
      position: absolute;
      right: 0;
      top: 0;
      width:156rpx;
      height:146rpx;
      background:rgba(255,255,255,0.95);
      text-align: right;
      padding-right: 30rpx;
      .c_pe{
        margin-top: 32rpx;
        height:44rpx;
        font-size:24rpx;
        font-family:PingFangSC-Semibold,PingFang SC;
        font-weight:600;
        color:rgba(51,51,51,1);
        line-height:44rpx;
        .c_price{
          font-size:32rpx;
        }
      }
      .c_num{
        height:28rpx;
        font-size:20rpx;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(102,102,102,1);
        line-height:28rpx;
      }
    }
    .scroll-view_H {
      white-space: nowrap;
      width: 100%;
      image{
        width: 140rpx;
        height: 140rpx;
      }	
    }
    .scroll-view-item_H{
      display: inline-block;
      margin-right:8rpx;
    }
    .scroll-view-item_H:last-of-type{
      margin-right: 40rpx;
    }
  }
  .list_buy{
    margin-top: 62rpx;
    overflow: hidden;
    padding: 0 30rpx 38rpx 0rpx;
    .tobuy{
      text-align: center;
      width:160rpx;
      float: right;
      height:60rpx;
      background:#434343;
      border-radius:30rpx;
      font-size:28rpx;
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      color:#F6DA99;
      line-height:60rpx;
      margin-left: 20rpx;
      &.other {
        border: 1px solid #DDDDDD;
        background-color: #FFFFFF;
        color: #666666;
      }
      &.again {
        border: 1px solid #434343;
        background-color: #FFFFFF;
      }
    }
  }
}
.load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80rpx;
  color: #333333;
  font-size: 26rpx;
  background: #FAFAFA;
}
</style>